<template>
  <view class="content" :style="{ paddingTop: CustomBar + 'px' }">
    <view
      class="contain_tab flex-row justify-center items-center"
      :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }"
    >
      <view class="flex items-center w100 tabbar">
        <text class="store_name c_f">一起秒，冲冲冲</text>
        <view class="share"  v-if="isLogin">
        <image
          
          src="../../static/index/share.png"
          mode="widthFix"
          class="share-img"
        ></image>
        <button class="share-btn" open-type="share"></button></view>
      </view>
    </view>
    <view class="list flex flex-col justify-center items-center">
      <view class="seckillList acea-row row-between-wrapper">
        <view class="priceTag">
          <image src="/static/priceTag.png"></image>
        </view>
        <view class="timeLsit">
          <scroll-view
            class="scroll-view_x"
            scroll-x
            scroll-with-animation
            :scroll-left="scrollLeft"
            style="width: auto; overflow: hidden"
          >
            <block v-for="(item, index) in dataList" :key="index">
              <view
                @tap="settimeList(item, index)"
                class="item"
                :class="active == index ? 'on' : ''"
              >
                <view class="time">{{ item.time.split(",")[0] }}</view>
                <view class="state">{{ item.statusName }}</view>
              </view>
            </block>
          </scroll-view>
        </view>
      </view>
      <view class="good" v-if='seckillList.length>0'>
        <view class="good-item" v-for="(item, index) in seckillList" :key="index" @tap="goDetail(item)">
          <image class="good-item-left" :src="item.image" />
          <view class="good-item-right">
            <view class="good-item-right-1">{{ item.title }}</view>
            <view class="good-item-right-2">
              <view
                class="good-item-right-2-1"
                :style="{ width: item.percent + '%' }"
              ></view>
              <view class="good-item-right-2-2"></view>
              <image
                class="good-item-right-2-3"
                :style="{ left: item.percent - 2 + '%' }"
                src="/static/shandian.svg"
              />
            </view>
            <view class="good-item-right-4">库存{{item.quota}}件 
            <text style="background: #DF4B43;color:#fff;padding: 2rpx 4rpx;margin-left: 10rpx;border-radius: 4rpx;;">{{item.consumeType == 0?'物流':item.consumeType == 1?'自提':''}}</text>
            <text style="background: #DF4B43;color:#fff;padding: 2rpx 4rpx;margin-left: 10rpx;border-radius: 4rpx;;">{{item.merchant.name}}</text></view>
            <view class="good-item-right-3">
              <view class="good-item-right-3-1">
                <view class="good-item-right-3-1-1">¥</view>
                <view class="good-item-right-3-1-2">{{ item.price }}</view>
                <view class="good-item-right-3-1-3">/{{ item.unitName }}</view>
              </view>
              <view class="good-item-right-3-2" v-if="status==2">马上抢</view>
      	<view class="good-item-right-3-2 good-item-right-3-3" v-if="status==1">未开始</view>
      	<view class="good-item-right-3-2 good-item-right-3-3" v-if="status==-1">已结束</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <listFooter :loadtitle="loadtitle"></listFooter>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getSeckillHeaderApi, getSeckillList } from "@/api/activity.js";
import listFooter from "../../components/listFooter/listFooter.vue";
import countDown from '@/components/countDown/index.vue'
export default {
  computed: mapGetters(["userInfo", "isLogin", "uid"]),
  components: {
    countDown,listFooter
  },
  data() {
    return {
      page: 1,
      limit: 10,
      loading: false,
      loadend: false,
      loadtitle: '暂无数据',
      CustomBar: this.CustomBar,
      StatusBar: this.StatusBar,
      active: 0,
      seckillList: [],
      dataList: [],
      status: -1,
      missionId: ''
    };
  },
  onShareAppMessage(res) {
    return {
      title: '好友邀请你一起秒杀啦！',
      path: '/pages/index/index?spreadId=' + this.uid,
      imageUrl: "https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png"
    }
  },
  onPullDownRefresh() {
    this.list = []
    this.page=1
    this.loadend = false
    this.getSeckillConfig();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom() {
    this.page++
    this.getList();
  },
  onLoad(options) {
    console.log(options, 'options-----')
    if (options.missionId) {
      this.missionId = options.missionId
    }
  },
  onShow: function () {
    this.loadend = false
    this.getSeckillConfig();
  },
  methods: {
    getSeckillConfig: function () {
      let that = this;
      getSeckillHeaderApi().then((res) => {
        that.dataList = res.data;
        that.seckillList = [];
        that.page = 1;
        if (that.dataList.length > 0) {
          that.status = that.dataList[that.active].status;
          that.getList();
        }
      });
    },
    settimeList: function (item, index) {
      var that = this;
      this.active = index;
      that.status = that.dataList[that.active].status;
      that.loadend = false;
      that.page = 1;
      that.seckillList = [];
      that.getList();
    },
    goDetail(item) {
      let url = "/subpageC/seckill_detail/seckill_detail?id=" + item.id
      if (this.missionId) {
        url+='&missionId=' + this.missionId
      }
      uni.navigateTo({
        url
      });
    },
    //获取列表
    getList: function () {
      var that = this;
      var data = {
        page: that.page,
        limit: that.limit,
      };
      if (that.loadend) return;
      if (that.loading) return;
        that.loading = true;
        uni.showLoading({
          title: '加载中...'
        })
      getSeckillList(that.dataList[that.active].id, data)
        .then((res) => {
          var seckillList = res.data.list;
          var loadend = seckillList.length < that.limit;
          that.seckillList = that.seckillList.concat(seckillList),
          that.loading = false;
          uni.hideLoading()
          that.loadend = loadend;
          this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
        })
        .catch((err) => {
          that.loading = false;
          uni.hideLoading()
        });
    },
  },
};
</script>

<style lang="scss">
.swiper {
  width: 100%;
  height: 300rpx;
  &-item {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
  }
}
.seckillList {
  padding: 25rpx;
}

.seckillList .priceTag {
  width: 75rpx;
  height: 70rpx;
}

.seckillList .priceTag image {
  width: 100%;
  height: 100%;
}

.timeLsit {
  width: 596rpx;
  white-space: nowrap;
}

.timeLsit .item {
  display: inline-block;
  font-size: 20rpx;
  color: #666;
  text-align: center;
  box-sizing: border-box;
  margin: 0 10rpx;
  width: 120rpx;
}

.timeLsit .item .time {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.timeLsit .item.on .time {
  color: #df4b43;
}

.timeLsit .item.on .state {
  height: 30rpx;
  line-height: 30rpx;
  border-radius: 15rpx;
  width: 128rpx;
  background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
  color: #fff;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contain_tab {
  position: fixed;
  z-index: 99;
  background-color: #df4b43;
  width: 100%;
  left: 0;
  top: 0;
  .tabbar {
    width: 100%;
    position: relative;
    padding-left: 30rpx;
    .share {
      margin-left: 40rpx;
      position: relative;
      display: flex;
      &-img {
        width: 40rpx;
        left: 40rpx;
      }
      &-btn {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
    }
    
  }
}
.bgred {
  padding: 30rpx 0;
  padding-bottom: 0;
}
.w50 {
  width: 50%;
  color: #fff;
}
.good {

  &-item {
	  display: flex;
	  width: 690rpx;
	  margin-top: 24rpx;
	  padding: 24rpx;
	  border: 1px solid #eee;
	  border-radius: 20rpx;
	  background-color: #fff;
    &-left {
      width: 220rpx;
      height: 220rpx;
    }
    &-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-left: 12rpx;
      &-1 {
        color: #1d2129;
        font-family: PingFang SC;
        font-size: 30rpx;
        font-style: normal;
        font-weight: 500;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
      }
      &-4 {
        margin-top: 20rpx;
        color: #525252;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
      }
      &-3 {
        display: flex;
        align-items: center;
        height: 74rpx;
		&-3 {
			background: #666!important;
		}
        &-2 {
          border-radius: 100rpx;
          background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
          width: 158rpx;
          height: 60rpx;
          text-align: center;
          line-height: 60rpx;
          font-family: PingFang SC;
          font-size: 30rpx;
          font-style: normal;
          font-weight: 500;
          color: #fff;
        }
        &-1 {
          display: flex;
          align-items: baseline;
          flex: 1;
          &-1 {
            color: #ff3d00;
            font-family: PingFang SC;
            font-size: 26rpx;
            font-style: normal;
            font-weight: 400;
          }
          &-2 {
            color: #ff3d00;
            font-family: PingFang SC;
            font-size: 48rpx;
            font-style: normal;
            font-weight: 500;
          }
          &-3 {
            color: #848484;
            font-family: PingFang SC;
            font-size: 26rpx;
            font-style: normal;
            font-weight: 400;
          }
        }
      }
      &-2 {
        position: relative;
        width: 100%;
        height: 26rpx;
        display: flex;
        margin-top: 20rpx;
        &-1 {
          height: 100%;
          border-radius: 20rpx 0 0 20rpx;

          background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
        }
        &-2 {
          flex: 1;
          height: 100%;
          background: #fee9e6;
          border-radius: 0 20rpx 20rpx 0;
        }
        &-3 {
          position: absolute;
          top: -7rpx;
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}
.menu {
  width: 710rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-left: 20rpx;
  flex-direction: column;
  &-bottom {
    height: 130rpx;
    width: 100%;
    display: flex;
    &-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      &-1 {
        font-family: PingFang SC;
        font-size: 38rpx;
        font-style: normal;
        font-weight: 500;
        color: #000;
      }
      &-2 {
        font-family: PingFang SC;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }
  &-top {
    display: flex;
    align-items: center;
    height: 184rpx;
    padding: 32rpx;
    border-bottom: 1px solid #efefef;
    width: 100%;
    &-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 20rpx;
    }
    &-mid {
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      flex: 1;
      &-1 {
        color: rgba(0, 0, 0, 0.8);
        font-family: PingFang SC;
        font-size: 38rpx;
        font-style: normal;
        font-weight: 500;
      }
      &-2 {
        display: flex;
        align-items: center;
        &-img {
          width: 30rpx;
          height: 30rpx;
        }
        &-txt {
          color: #df4b43;
          font-family: PingFang SC;
          font-size: 24rpx;
          font-style: normal;
          font-weight: 400;
        }
      }
    }
    &-right {
      border-radius: 50px;
      background: #df4b43;
      height: 68rpx;
      padding: 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &-img {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }
      &-txt {
        font-family: PingFang SC;
        font-size: 26rpx;
        font-style: normal;
        font-weight: 500;
        color: #fff;
      }
    }
  }
}
</style>
